<template>
	<view class="home-HUi" style="margin-top: 0;">
		<view class="home-HUi-Item" v-for="item in community" @click="Go(item)">
			<view class="home-HUi-Item-text">
				<span>{{ item.text }}</span>
			</view>
			<view class="home-HUi-Item-img">
				<image :src="item.img">
				</image>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref
} from "vue"
let community = ref([{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u674.svg",
	text: "我的车位",
	url: '/pages/stall/stall'

},
{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u679.svg",
	text: "停车缴费",
	url: "/pages/HFC/HFC"
},
{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u683.svg",
	text: "在线维修",
	url: "/pages/repairs/repairs"
},
{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u687.svg",
	text: "投诉建议",
	url: "/pages/suggest/suggest"
},
{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u687.svg",
	text: "问卷调查",
	url: "/pages/survey/survey"
},
{
	img: "https://cdn7.axureshop.com/demo/1996612/images/%E9%A6%96%E9%A1%B5/u695.svg",
	text: "社区公告",
	url: '/pages/notice/notice'
}
])
// 跳转页面
let Go = (item) => {
	console.log(item);
	uni.navigateTo({
		url: item.url
	})
}
</script>

<style lang="less" scoped>
// 智慧社区
.home-HUi {
	display: flex;
	flex-direction: row;
	background: #fff;
	padding: 10rpx;
	margin: 20rpx;
	justify-content: space-around;
	flex-wrap: wrap;

	.home-HUi-Item {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		border-width: 0px;
		width: 160px;
		height: 69px;
		background: inherit;

		border: none;
		border-radius: 4px;
		margin-top: 20rpx;

		.home-HUi-Item-text {
			color: #fff;
			font-size: 28rpx;
		}

		.home-HUi-Item-img {
			width: 66rpx;
			height: 66rpx;

			image {
				height: 84%;
				width: 84%;
				vertical-align: middle;
			}
		}
	}
}

.home-HUi .home-HUi-Item:nth-child(1) {
	background-color: rgba(64, 158, 255, 0.8);
}

.home-HUi .home-HUi-Item:nth-child(2) {
	background-color: rgba(255, 100, 98, 0.8);
}

.home-HUi .home-HUi-Item:nth-child(3) {
	background-color: rgba(122, 139, 219, 0.8);
}

.home-HUi .home-HUi-Item:nth-child(4) {
	background-color: rgba(243, 142, 119, 0.8);
}

.home-HUi .home-HUi-Item:nth-child(5) {
	background-color: rgba(103, 219, 134, 0.8);
}

.home-HUi .home-HUi-Item:nth-child(6) {
	background-color: rgba(223, 89, 0, 0.6);
}
</style>